<template>
  <div id="chat-messages">
    <van-sticky>
      <NavBar>
      <template #left>
        <van-icon name="arrow-left" @click="clickLeftNavBar"/>
      </template>
    </NavBar>
    </van-sticky>
    <div class="content-box">
      <van-cell center size="large" value="个人主页" is-link style="margin: 10px 0; padding: 20px 15px">
        <template #title>
          <van-image class="my-van-image"
            round
            fit="cover"
            width="2rem"
            height="2rem"
            :src="toUser?.avatarUrl"
          />
          <div class="userInfo" style="display: inline-block;">
            <div class="userName">{{toUser?.username}}</div>
            <div class="my-tags" ref="myTags">
              <van-tag round color="rgba(0,0,0,.5)" class="custTag"
                       v-for="showTag in showTags">
                {{ showTag }}
              </van-tag>
            </div>
          </div>
        </template>
        <template #left>
          
        </template>
      </van-cell>
      <van-cell title="获取全部聊天记录" is-link style="margin-bottom: 10px;"></van-cell>
      <van-cell title="清空聊天记录" is-link> </van-cell>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted, nextTick} from 'vue';
import { useRouter, useRoute } from 'vue-router';
import {useAppStoreWithOut} from '../../store/modules/app';
import { useCache } from '../../hooks/useCache';

const toUser = ref<API.User>(); //当前聊天框的对象信息
const showTags = ref(); //要展示的标签
const appStore = useAppStoreWithOut();
const {wsCache} = useCache();

const router = useRouter();
const clickLeftNavBar = () => {
  router.back();
}

onMounted(() => {
  initdata();
})

const initdata = () => {
  toUser.value = wsCache.get(appStore.getCurrentSessionToUser);
  if (toUser.value?.tags) {
    toUser.value.tags = JSON.parse(toUser.value.tags);
    showTags.value = toUser.value?.tags?.slice(0,2);
  }
}
</script>

<style scoped>
.content-box {
  /* padding-top: 1px; */
  position: absolute;
	top: 46px;
	left: 0;
  height: 100%;
  width: 100%;
  background-color: #eef0f3;
}
.my-van-image {
  margin-left: 8px;
  vertical-align: middle;
}
.userInfo {
  vertical-align: middle;
}
.userName {
  margin-left: 16px;
  font-size: 16px;
}

.my-tags {
  margin-left: 16px;
}

.custTag{
  margin-right: 10px;
}
</style>